<template>
  <div class="equipment-form-page">
    <div class="page-header">
      <div class="header-left">
        <el-button text @click="handleBack">
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-button>
        <h2>{{ isEdit ? '编辑设备' : '新增设备' }}</h2>
      </div>
      <div class="header-actions">
        <el-button @click="handleSave">
          <el-icon><DocumentCopy /></el-icon>
          保存
        </el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitting">
          <el-icon><Check /></el-icon>
          提交
        </el-button>
      </div>
    </div>

    <el-card>
      <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
        <!-- 基本信息 -->
        <el-divider content-position="left">
          <h3><el-icon><SetUp /></el-icon> 基本信息</h3>
        </el-divider>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="设备编号" prop="code">
              <el-input v-model="formData.code" placeholder="自动生成" :disabled="isEdit" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备名称" prop="name">
              <el-input v-model="formData.name" placeholder="请输入设备名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备分类" prop="category">
              <el-select v-model="formData.category" placeholder="请选择" style="width: 100%">
                <el-option label="数控设备" value="cnc" />
                <el-option label="冲压设备" value="stamping" />
                <el-option label="焊接设备" value="welding" />
                <el-option label="装配设备" value="assembly" />
                <el-option label="检测设备" value="testing" />
                <el-option label="包装设备" value="packing" />
                <el-option label="辅助设备" value="auxiliary" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="规格型号" prop="model">
              <el-input v-model="formData.model" placeholder="请输入规格型号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="品牌">
              <el-input v-model="formData.brand" placeholder="请输入品牌" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="制造商">
              <el-input v-model="formData.manufacturer" placeholder="请输入制造商" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="购置日期">
              <el-date-picker v-model="formData.purchaseDate" type="date" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="安装日期">
              <el-date-picker v-model="formData.installDate" type="date" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="投产日期">
              <el-date-picker v-model="formData.commissionDate" type="date" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 位置信息 -->
        <el-divider content-position="left">
          <h3><el-icon><Location /></el-icon> 位置信息</h3>
        </el-divider>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="所属车间" prop="workshop">
              <el-select v-model="formData.workshop" placeholder="请选择" style="width: 100%">
                <el-option label="冲压车间" value="stamping_workshop" />
                <el-option label="焊接车间" value="welding_workshop" />
                <el-option label="装配车间" value="assembly_workshop" />
                <el-option label="包装车间" value="packing_workshop" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="具体位置" prop="location">
              <el-input v-model="formData.location" placeholder="如：A区-01号位" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备状态">
              <el-select v-model="formData.status" placeholder="请选择" style="width: 100%">
                <el-option label="运行中" value="running" />
                <el-option label="待机" value="standby" />
                <el-option label="维护中" value="maintenance" />
                <el-option label="故障" value="fault" />
                <el-option label="闲置" value="idle" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 责任人信息 -->
        <el-divider content-position="left">
          <h3><el-icon><User /></el-icon> 责任人信息</h3>
        </el-divider>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="设备负责人">
              <el-select v-model="formData.manager" placeholder="请选择" style="width: 100%">
                <el-option label="张三" value="user1" />
                <el-option label="李四" value="user2" />
                <el-option label="王五" value="user3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作工">
              <el-select v-model="formData.operator" placeholder="请选择" style="width: 100%">
                <el-option label="赵六" value="user4" />
                <el-option label="钱七" value="user5" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="维修工">
              <el-select v-model="formData.maintainer" placeholder="请选择" style="width: 100%">
                <el-option label="孙八" value="user6" />
                <el-option label="周九" value="user7" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 技术参数 -->
        <el-divider content-position="left">
          <h3><el-icon><DataLine /></el-icon> 技术参数</h3>
        </el-divider>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="额定功率">
              <el-input v-model="formData.powerRating" placeholder="如：7.5KW">
                <template #append>KW</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="额定电压">
              <el-input v-model="formData.voltage" placeholder="如：380V">
                <template #append>V</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生产能力">
              <el-input v-model="formData.capacity" placeholder="如：100件/小时" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="设备原值">
              <el-input-number v-model="formData.originalValue" :min="0" :precision="2" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="使用年限">
              <el-input-number v-model="formData.usefulLife" :min="1" :max="30" style="width: 100%">
                <template #append>年</template>
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="维保周期">
              <el-input-number v-model="formData.maintenanceCycle" :min="7" :max="365" style="width: 100%">
                <template #append>天</template>
              </el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 附件上传 -->
        <el-divider content-position="left">
          <h3><el-icon><Paperclip /></el-icon> 附件资料</h3>
        </el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设备照片">
              <el-upload
                list-type="picture-card"
                :auto-upload="false"
                :limit="5"
              >
                <el-icon><Plus /></el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备文档">
              <el-upload
                :auto-upload="false"
                drag
              >
                <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
                <div class="el-upload__text">
                  拖拽文件或<em>点击上传</em>
                </div>
                <template #tip>
                  <div class="el-upload__tip">
                    说明书、合格证、保修卡等
                  </div>
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="备注说明">
          <el-input
            v-model="formData.remark"
            type="textarea"
            :rows="4"
            placeholder="请输入备注说明..."
          />
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { 
  ArrowLeft, DocumentCopy, Check, SetUp, Location, User, 
  DataLine, Paperclip, Plus, UploadFilled 
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const formRef = ref(null)
const submitting = ref(false)

const isEdit = computed(() => route.name === 'EquipmentEdit')

const formData = reactive({
  code: '',
  name: '',
  category: '',
  model: '',
  brand: '',
  manufacturer: '',
  purchaseDate: '',
  installDate: '',
  commissionDate: '',
  workshop: '',
  location: '',
  status: 'standby',
  manager: '',
  operator: '',
  maintainer: '',
  powerRating: '',
  voltage: '',
  capacity: '',
  originalValue: null,
  usefulLife: 10,
  maintenanceCycle: 90,
  remark: ''
})

const rules = {
  name: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
  category: [{ required: true, message: '请选择设备分类', trigger: 'change' }],
  model: [{ required: true, message: '请输入规格型号', trigger: 'blur' }],
  workshop: [{ required: true, message: '请选择所属车间', trigger: 'change' }],
  location: [{ required: true, message: '请输入具体位置', trigger: 'blur' }]
}

const handleBack = () => router.back()

const handleSave = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('保存成功')
    }
  })
}

const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      submitting.value = true
      setTimeout(() => {
        submitting.value = false
        ElMessage.success('提交成功')
        router.push('/equipment/ledger')
      }, 1000)
    } else {
      ElMessage.error('请完善表单信息')
    }
  })
}

onMounted(() => {
  if (!isEdit.value) {
    // 生成设备编号
    const year = new Date().getFullYear()
    const random = Math.floor(Math.random() * 1000).toString().padStart(3, '0')
    formData.code = `EQ-${year}-${random}`
  }
})
</script>

<style scoped>
.equipment-form-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header-left h2 {
  margin: 0;
  font-size: 20px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.el-divider h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: #303133;
}

.el-icon--upload {
  font-size: 67px;
  color: #c0c4cc;
  margin-bottom: 16px;
}
</style>

